import { FC } from 'react';
import Footer from '@/components/Footer';
import { observer } from 'mobx-react-lite';
import LpProTable from '@/components/LpProTable';
import { LpProTableBaseColumnType, LpProTableColumnsType } from '@/components/LpProTable/type';
import { ProFormSelect, RequestData } from '@ant-design/pro-components';
import { Tag } from 'antd';

interface TestType extends LpProTableBaseColumnType<TestType> {
    id: number;
    name: string;
    account: string;
    type: number;
}

const columns: LpProTableColumnsType<TestType> = [
    {
        title: '姓名',
        key: 'name',
        dataIndex: 'name',
        hideInSearch: false,
        attr: {
            type: 'input',
        },
    },
    {
        title: '昵称',
        key: 'account',
        dataIndex: 'account',
    },
    {
        title: '类型',
        key: 'type',
        dataIndex: 'type',
        attr: {
            customComponent: ({ type }) => (
                <ProFormSelect
                    width="md"
                    name="sex"
                    initialValue={type}
                    options={[
                        {
                            label: '男',
                            value: 1,
                        },
                        {
                            label: '女',
                            value: 0,
                        },
                    ]}
                    label="性别"
                />
            ),
        },
        render: text => {
            return text == 1 ? <Tag color="magenta">男</Tag> : <Tag color="v">女</Tag>;
        },
    },
];

const getTableData = async (param: any, sort: any, filter: any): Promise<Partial<RequestData<TestType>>> => {
    console.log(param, sort, filter);

    return {
        data: [
            {
                id: 1,
                account: '1',
                name: '2',
                type: 1,
            },
        ],
        success: true,
        total: 100,
    };
};

const deleteTableItem = async (id: number) => {
    console.log(id);
    return true;
};

const addTableItem = async (record: Partial<TestType>) => {
    console.log(record);
    return true;
};

const updateTableItem = async (record: Partial<TestType>) => {
    console.log(record);

    return true;
};

const ReposManage: FC = () => {
    return (
        <>
            <LpProTable<TestType> columns={columns} getTableData={getTableData} deleteTableItem={deleteTableItem} addTableItem={addTableItem} updateTableItem={updateTableItem}></LpProTable>
        </>
    );
};
export default observer(ReposManage);
